<!DOCTYPE html>
<html lang="en">
<head>
    <link href="https://cdn.bootcss.com/bootstrap/4.1.3/css/bootstrap.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/animate.css/3.5.2/animate.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/vue-router/3.1.2/vue-router.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.19.0/axios.min.js"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>使用Watch监听文本框的变化</title>
</head>
<body>
<div align="center">
    <h1>
        使用Watch监听文本框的变化
    </h1>
</div>
<!--监听文本框数据的改变进行操作-->
<div id="app">
    <input type="text" v-model="firstname">+
    <input type="text" v-model="lastname">=
    <input type="text" v-model="fullname">
</div>
</body>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            firstname:'',
            lastname:'',
            fullname:''
        },
        methods:{
        },
        watch:{
            'firstname':function (newVal, oldVal) {
                // this.fullname = this.firstname + '-' + this.lastname
                this.fullname = newVal + '-' + this.lastname
            },
            'lastname':function (newVal) {
                this.fullname = this.firstname + '-' + newVal
            }
        }
    });
</script>
</html>